<template>
    <div class="demo1-box">
        <div ref="target" class="content"></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch, defineProps } from "vue";
let props = defineProps({
    demo1TimeProps: {
        type: String,
        default: '年',
    }
})

let target = ref(null);
let myChart = null;

onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});

let source = ref([
    ["南阳", "70", "32"],
    ["南阳", "70", "32"],
    ["郑州", "90", "60"],
    ["武汉", "95", "50"],
    ["信息", "70", "70"],
    ["策划", "77", "44"],
    ["车间", "87", "50"],
    ["西北", "45", "85"],
    ["浙闽", "67", "66"],
    ["户外", "89", "50"],
    ["资质", "74", "78"],
    ["合作", "64", "78"],
    ["工程", "84", "78"]
])
let option = {
    color: ['rgba(245, 42, 118,', 'rgba(255, 255, 0,', 'rgba(14, 248, 254,'],
    dataset: {
        source: source.value
    },
    grid: {
        top: '15%',
        bottom: '25%',
    },
    tooltip: {
        trigger: "axis",
        "axisPointer": {
            "type": "line",
            "lineStyle": {
                "width": 30,
                "color": "rgba(14, 248, 254,.1)"
            }
        },
        "legend": {
            "show": true,
            "right": 10,
            "data": [
                "经营账款完成率", "账款回收"
            ],
            "itemWidth": 4,
            "itemHeight": 12,
            "itemGap": 15,
            "icon": "circle",
            "textStyle": {
                "color": "rgba(14, 248, 254,1)",
                "fontSize": 12
            }
        },
        "borderWidth": 1,
        "backgroundColor": "#0e2b33",
        "borderColor": "rgba(14, 248, 254, 1)",
        "formatter": function (A) {
            var htm = "<div style='color:#fff'>" + A[0].name + "</div><div style='color:rgba(14, 248, 254,1)'>经营账款完成率：" + A[0].value[1].toLocaleString() + "%</div><div style='color:rgba(14, 248, 254,1)'>账款回收：" + A[0].value[2].toLocaleString() + "%</div>"
            return htm
        },
        "extraCssText": "z-index:96"
    },
    xAxis: {
        type: "category",
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: true,
            interval: 0,
            margin: 25,
            color: '#fff',
            fontSize: 12
        }
    },
    yAxis: {
        show: false,
        type: "value",
        axisLabel: {//y轴文字的配置
            color: "#fff",
            margin: 15
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
        },
    },
    series: [
        {
            name: '经营账款完成率', //顶
            type: 'pictorialBar',
            symbolSize: [15, 10],
            symbolOffset: [0, -10],
            symbolPosition: 'end',
            z: 12,
            itemStyle: {
                color: function (params) {
                    return option.color[2] + "1)"
                },
                barBorderRadius: 30,
            },
            label: {
                show: true,
                position: "top",
                fontSize: 8,
                fontFamily: "DIN",
                fontWeight: "bold",
                formatter: function (params) {
                    return params.value[params.encode.y[0]] + "%"
                }
            }
        }, {
            name: '经营账款完成率',
            type: 'bar',
            itemStyle: {
                color: function (params) {
                    var colorList = []
                    colorList[params.dataIndex] = new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: option.color[2] + '0.05)'
                        },
                        {
                            offset: 1,
                            color: option.color[2] + '.6)'
                        }
                        ]
                    )
                    return colorList[params.dataIndex]
                }
            },
            showBackground: true,
            backgroundStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                        offset: 0,
                        color: 'rgba(14, 248, 254,0)'
                    }, //柱图渐变色
                    {
                        offset: 1,
                        color: 'rgba(14, 248, 254,0.2)'
                    }
                    ]
                )
            },
            barWidth: 14,
            barGap: '-100%'
        },
        {
            "name": "账款回收",
            "type": "line",
            "smooth": true,
            "showAllSymbol": false,
            "showSymbol": false,
            "symbol": 'circle',
            "symbolSize": 3,
            "lineStyle": {
                "show": true,
                "color": "#ffea38"
            },
            "encode": {
            },

            "itemStyle": {
                "color": "#ffea38",
            }
        }]
};

const renderChart = () => {
    myChart.setOption(option);
    window.tools.loopShowTooltip(myChart, option, {
        loopSeries: true
    });

    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.demo1-box {
    width: 100%;
    height: 100%;
    cursor: pointer;

    .content {
        width: 100%;
        height: 100%;
    }
}
</style>
